import classNames from "classnames";
import { useDispatch } from "react-redux";
import {delTodo} from '../store/actions/index.js'
const TodoItem = ({id,text,done}) => {
  const dispatch = useDispatch()
  return (
    <li className={classNames({completed:done})}>
      <div className="view">
        <input className="toggle" type="checkbox" checked={done} onChange={(e)=> null}/>
        <label>{text}</label>
        <button className="destroy" onClick={() => dispatch(delTodo(id))}></button>
      </div>
      {/* <input className="edit" value="Create a TodoMVC template" /> */}
    </li>
  )
}

export default TodoItem;
